<template>
    <v-md-editor v-model="model" v-bind="config" @save="onSave"></v-md-editor>
</template>

<script setup lang="ts">
import { computed } from 'vue'
// @ts-ignore
import VMdEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
// @ts-ignore
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import '@kangc/v-md-editor/lib/theme/style/github.css'
// @ts-ignore
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index'
import hljs from 'highlight.js'
import { IVmEditor } from '../types'

VMdEditor.use(githubTheme, {
    Hljs: hljs
})
VMdEditor.use(createLineNumbertPlugin())

const emits = defineEmits(['update:value', 'save'])

const defaults: IVmEditor = {
    height: '600px',
    leftToolbar:
        'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code'
}

export type VmEditorProps = {
    value?: string
    config?: IVmEditor | undefined
}

const props = withDefaults(defineProps<Partial<VmEditorProps>>(), {})

const config = computed(() => Object.assign({}, defaults, props.config))

const model = computed({
    get: () => props.value,
    set: (val) => emits('update:value', val)
})

function onSave(text: string) {
    emits('save', text)
}
</script>

<style lang="less" scoped>
.v-md-editor {
    box-shadow: none;
}
</style>
